<template>
  <div class="main">
    <div class="body-left">
      <AwardCard :awardId="awardId"></AwardCard>
    </div>
    <div class="body-right">
      <el-radio-group v-model="labelPosition" @change="changeTable" label="label position">
        <el-radio-button label="status">学生信息</el-radio-button>
        <el-radio-button label="examine">申请材料</el-radio-button>
        <el-radio-button label="results">更新进度</el-radio-button>
      </el-radio-group>
      <div style="margin: 20px" />
      <el-form
          v-if="formFlag1"
          label-width="100px"
          :model="studentAwardForm"
          style="max-width: 460px"
      >
        <el-form-item label="申请人Id:">
          {{studentAwardForm.studentId}}
        </el-form-item>
        <el-form-item label="申请人姓名:">
          {{studentAwardForm.username}}
        </el-form-item>
        <el-form-item label="申请人电话:">
          {{studentAwardForm.phone}}
        </el-form-item>
        <el-form-item label="申请人邮箱:">
          {{studentAwardForm.email}}
        </el-form-item>
        <el-form-item label="审核进度:">
          {{studentAwardForm.status}}
        </el-form-item>
        <el-form-item label="结果:">
          {{studentAwardForm.result}}
        </el-form-item>
        <el-form-item label="申请材料:">
          {{studentAwardForm.fileUrl}}
        </el-form-item>
      </el-form>
      <el-form
          v-if="formFlag2"
          label-width="100px"
          :model="studentAward"
          style="max-width: 460px"
      >
        <iframe :src="studentAwardForm.fileUrl" style="height:100%;width:100%" ></iframe>
      </el-form>
      <el-form
          v-if="formFlag3"
          label-width="100px"
          :model="studentAward"
          style="max-width: 460px"
      >
        <el-form-item label="更新评定进度">
          <el-select v-model="studentAwardForm.status" placeholder="选择进度" size="large">
            <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="更新评定结果">
          <el-select v-model="studentAwardForm.result"  placeholder="选择结果" size="large">
            <el-option
                v-for="item in resultOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateForm">更新</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import AwardCard from "../common/AwardCard.vue";
import {loadStudentAwardFormById, updateStudentAwardsByForm} from "../../api/studentAwards";

export default {
  name: "Examine",
  components: {AwardCard},
  data() {
    return {
      studentAwardsId:this.$route.query.studentAwardsId,
      awardId:this.$route.query.awardId,
      labelPosition:'right',
      studentAward:{},
      formFlag1:true,
      formFlag2:false,
      formFlag3:false,
      studentAwardForm:{

      },
      form:{
        id:'',
        awardId:'',
        status:'',
        result:'',
        studentId:'',
      },
      statusOptions:[
        {
          value:'已申请',
          lable:'已申请',
        },
        {
          value:'已答辩',
          lable:'已答辩',
        },
        {
          value:'已出结果',
          lable:'已出结果',
        },
      ],
      resultOptions:[
        {
          value:'无结果',
          lable:'无结果',
        },
        {
          value:'未通过',
          lable:'未通过',
        },
        {
          value:'已通过',
          lable:'已通过',
        },
      ],
    };
  },
  created() {
    this.loadStudentAwardForm();
  },
  methods: {
    //通过奖项Id得到学生信息
    changeTable(){
      if (this.labelPosition=="status"){
        this.formFlag1 = true;
        this.formFlag2 = false;
        this.formFlag3 = false;
      }else if(this.labelPosition=="examine"){
        this.formFlag1 = false;
        this.formFlag2 = true;
        this.formFlag3 = false;
      }else {
        this.formFlag1 = false;
        this.formFlag2 = false;
        this.formFlag3 = true;
      }
    },
    //加载奖项信息通过奖项Id
    loadStudentAwardForm(){
      loadStudentAwardFormById(this.studentAwardsId).then(response =>{
        this.studentAwardForm = response.data
      })
    },
    //更新奖项进度
    updateForm(){
      this.form.id = this.studentAwardForm.studentAwardsId;
      this.form.studentId = this.studentAwardForm.studentId;
      this.form.status = this.studentAwardForm.status;
      this.form.result = this.studentAwardForm.result;
      this.form.awardId = this.studentAwardForm.awardId;
      updateStudentAwardsByForm(this.form).then(
          this.$notify({
            title: '成功',
            message: "更新成功",
            type: 'success'
          })
      )
    }
  }
}

</script>
<style scoped>
.main{
  display: flex;

}
.body-left{
  margin-top: 80px;
  margin-left: 100px;
}
.body-right {
  display: flex;
  flex-direction: column;
  margin-top: 80px;
  margin-left: 100px;
}
</style>
